import Head from 'next/head';
import RootPropTable from '../../../components/prop-tables/RootPropTable';
import OriginalExample from '../../../examples/enable-row-numbers-original';
import StaticExample from '../../../examples/enable-row-numbers-static';

<Head>
  <title>Row Numbers Feature Guide - Material React Table V1 Docs</title>
  <meta
    name="description"
    content="How to use and customize automatic row numbers in Material React Table"
  />
</Head>

## Row Numbers Feature Guide

Material React Table has an easy-to-implement row numbers feature. There are two row number modes you can enable. You can have row numbers that are associated with the data in the table ([original mode](<#enable-row-numbers-(original-mode)>)), or you can have row numbers that are only statically part of the table ([static mode](<#enable-row-numbers-(static-mode)>)).

### Relevant Props

<RootPropTable onlyProps={new Set(['enableRowNumbers', 'rowNumberMode'])} />

### Enable Row Numbers (Original Mode)

In the default rowNumberMode (`original`), the row numbers are linked to the original index of the data array. This means that when you search or filter, the same row numbers will stay with the row, though they will not be in the same order when sorted or will skip numbers when filtered.

<OriginalExample />

### Enable Row Numbers (Static Mode)

Alternatively, if you just want row numbers to always be the same and in order, you can use the `static` row number mode.

<StaticExample />

View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-row-number-examples)**
